<template>
  <div class="banner-main">
    <el-row>
      <el-col :span="24">
        <Carousel :key="0" :type="0" :banner-list="homeBannerList" @refresh="getBannerList" />
      </el-col>
      <el-col :span="24">
        <Carousel :key="1" :type="1" :banner-list="H5BannerList" @refresh="getBannerList" />
      </el-col>
      <el-col :span="24">
        <Carousel :key="2" :type="2" :banner-list="UiBannerList" @refresh="getBannerList" />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import bannerApi from '@/api/saleInfo/banner.js'
import Carousel from './components/Carousel.vue'
export default {
  name: 'ContentBanner',
  components: {
    Carousel
  },
  data() {
    return {
      bannerList: []
    }
  },

  computed: {

    homeBannerList() {
      return this.bannerList.filter(item => item.type == 0)
    },
    H5BannerList() {
      return this.bannerList.filter(item => item.type == 1)
    },
    UiBannerList() {
      return this.bannerList.filter(item => item.type == 2)
    }
  },
  created() {
    this.getBannerList()
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async getBannerList() {
      var rs = await bannerApi.list()
      this.bannerList = rs.data
    }

  }
}
</script>

<style scoped lang="scss">
.banner-main {
    width: 900px;
    margin: 30px auto;
}
</style>
